<div class="content-section introduction">
    <div class="feature-intro">
        <h1>Tag</h1>
        <p>Tag component is used to categorize content.</p>
    </div>
    <app-demoActions github="tag" stackblitz="tag-demo"></app-demoActions>
</div>

<div class="content-section implementation">
    <div class="card">
        <h5>Tags</h5>
        <p-tag styleClass="mr-2" value="Primary"></p-tag>
        <p-tag styleClass="mr-2" severity="success" value="Success"></p-tag>
        <p-tag styleClass="mr-2" severity="info" value="Info"></p-tag>
        <p-tag styleClass="mr-2" severity="warning" value="Warning"></p-tag>
        <p-tag severity="danger" value="Danger"></p-tag>

        <h5>Pills</h5>
        <p-tag styleClass="mr-2" value="Primary" [rounded]="true"></p-tag>
        <p-tag styleClass="mr-2" severity="success" value="Success" [rounded]="true"></p-tag>
        <p-tag styleClass="mr-2" severity="info" value="Info" [rounded]="true"></p-tag>
        <p-tag styleClass="mr-2" severity="warning" value="Warning" [rounded]="true"></p-tag>
        <p-tag severity="danger" value="Danger" [rounded]="true"></p-tag>

        <h5>Icons</h5>
        <p-tag styleClass="mr-2" icon="pi pi-user" value="Primary"></p-tag>
        <p-tag styleClass="mr-2" icon="pi pi-check" severity="success" value="Success"></p-tag>
        <p-tag styleClass="mr-2" icon="pi pi-info-circle" severity="info" value="Info"></p-tag>
        <p-tag styleClass="mr-2" icon="pi pi-exclamation-triangle" severity="warning" value="Warning"></p-tag>
        <p-tag icon="pi pi-times" severity="danger" value="Danger"></p-tag>
    </div>
</div>

<div class="content-section documentation">
    <p-tabView>
        <p-tabPanel header="Documentation">
            <h5>Import</h5>
<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
import &#123; TagModule &#125; from 'primeng/tag';
</app-code>
            <h5>Getting Started</h5>
            <p>Content of the tag is specified using the <i>value</i> property.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-tag value="New"&gt;&lt;/p-tag&gt;
</app-code>

            <h5>Icon</h5>
            <p>An icon can also be configured to be displayed next to the value with the <i>icon</i> property.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-tag value="New" icon="pi pi-plus"&gt;&lt;/p-tag&gt;
</app-code>

            <h5>Severities</h5>
            <p>Different color options are available as severity levels.</p>

            <ul>
                <li>success</li>
                <li>info</li>
                <li>warning</li>
                <li>danger</li>
            </ul>

            <h5>Templating</h5>
            <p>Content can easily be customized with the default slot instead of using the built-in display.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-tag&gt;
    Content
&lt;/p-tag&gt;

</app-code>

                <h5>Properties</h5>
                <div class="doc-tablewrapper">
					<table class="doc-table">
						<thead>
                            <tr>
                                <th>Name</th>
                                <th>Type</th>
                                <th>Default</th>
                                <th>Description</th>
                            </tr>
						</thead>
						<tbody>
                            <tr>
                                <td>value</td>
                                <td>any</td>
                                <td>null</td>
                                <td>Value to display inside the tag.</td>
                            </tr>
							<tr>
                                <td>severity</td>
                                <td>string</td>
                                <td>null</td>
                                <td>Severity type of the tag.</td>
                            </tr>
							<tr>
                                <td>rounded</td>
                                <td>boolean</td>
                                <td>false</td>
                                <td>Whether the corners of the tag are rounded.</td>
                            </tr>
							<tr>
                                <td>icon</td>
                                <td>string</td>
                                <td>null</td>
                                <td>Icon of the tag to display next to the value.</td>
                            </tr>
                            <tr>
                                <td>style</td>
                                <td>object</td>
                                <td>null</td>
                                <td>Inline style of the component.</td>
                            </tr>
                            <tr>
                                <td>styleClass</td>
                                <td>string</td>
                                <td>null</td>
                                <td>Style class of the component.</td>
                            </tr>
						</tbody>
					</table>
                </div>
                
				<h5>Styling</h5>
				<p>Following is the list of structural style classes, for theming classes visit <a href="#" [routerLink]="['/theming']">theming</a> page.</p>
				<div class="doc-tablewrapper">
					<table class="doc-table">
						<thead>
						<tr>
							<th>Name</th>
							<th>Element</th>
						</tr>
						</thead>
						<tbody>
                            <tr>
                                <td>p-tag</td>
                                <td>Tag element</td>
                            </tr>
                            <tr>
                                <td>p-tag-rounded</td>
                                <td>Rounded element</td>
                            </tr>
                            <tr>
                                <td>p-tag-icon</td>
                                <td>Icon of the tag</td>
                            </tr>
                            <tr>
                                <td>p-tag-value</td>
                                <td>Value of the tag</td>
                            </tr>
						</tbody>
					</table>
				</div>

            <h5>Dependencies</h5>
            <p>None.</p>
        </p-tabPanel>

        <p-tabPanel header="Source">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/tag" class="btn-viewsource" target="_blank">
                <span>View on GitHub</span>
            </a>
            <a href="https://stackblitz.com/edit/primeng-tag-demo" class="btn-viewsource" style="margin-left: .5em;" target="_blank">
                <span>Edit in StackBlitz</span>
            </a>
            
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;h5&gt;Tags&lt;/h5&gt;
&lt;p-tag styleClass="mr-2" value="Primary"&gt;&lt;/p-tag&gt;
&lt;p-tag styleClass="mr-2" severity="success" value="Success"&gt;&lt;/p-tag&gt;
&lt;p-tag styleClass="mr-2" severity="info" value="Info"&gt;&lt;/p-tag&gt;
&lt;p-tag styleClass="mr-2" severity="warning" value="Warning"&gt;&lt;/p-tag&gt;
&lt;p-tag severity="danger" value="Danger"&gt;&lt;/p-tag&gt;

&lt;h5&gt;Pills&lt;/h5&gt;
&lt;p-tag styleClass="mr-2" value="Primary" [rounded]="true"&gt;&lt;/p-tag&gt;
&lt;p-tag styleClass="mr-2" severity="success" value="Success" [rounded]="true"&gt;&lt;/p-tag&gt;
&lt;p-tag styleClass="mr-2" severity="info" value="Info" [rounded]="true"&gt;&lt;/p-tag&gt;
&lt;p-tag styleClass="mr-2" severity="warning" value="Warning" [rounded]="true"&gt;&lt;/p-tag&gt;
&lt;p-tag severity="danger" value="Danger" [rounded]="true"&gt;&lt;/p-tag&gt;

&lt;h5&gt;Icons&lt;/h5&gt;
&lt;p-tag styleClass="mr-2" icon="pi pi-user" value="Primary"&gt;&lt;/p-tag&gt;
&lt;p-tag styleClass="mr-2" icon="pi pi-check" severity="success" value="Success"&gt;&lt;/p-tag&gt;
&lt;p-tag styleClass="mr-2" icon="pi pi-info-circle" severity="info" value="Info"&gt;&lt;/p-tag&gt;
&lt;p-tag styleClass="mr-2" icon="pi pi-exclamation-triangle" severity="warning" value="Warning"&gt;&lt;/p-tag&gt;
&lt;p-tag icon="pi pi-times" severity="danger" value="Danger"&gt;&lt;/p-tag&gt;
</app-code>
        </p-tabPanel>
        <p-tabPanel header="StackBlitz">
            <ng-template pTemplate="content">
                <iframe src="https://stackblitz.com/edit/primeng-tag-demo?embed=1" style="width: 100%; height: 768px; border: none;"></iframe>
            </ng-template>
        </p-tabPanel>
    </p-tabView>
</div>
